<template>
  <div style="height: 800px; position: relative;">
    <div class="list-table"  :ref="setting.ref" style="height: 800px;" :id="setting.id"></div>
    <div class="dg"
         style="width: 245px; margin-right: 10px; position: absolute; right: 0px; top: 0px; z-index: 1000;">
      <ul>
        <li class="cr string">
          <div><span class="property-name">xAxis3D</span>
            <div class="c">
              <select v-model="controls.config.xAxis3D" v-on:change="selectChange">
                <option v-for="(item, key) in controls.configParameters.xAxis3D.options"
                        :key="key"
                        :value="item">{{ item }}
                </option>
              </select>
            </div>
          </div>
        </li>
        <li class="cr string">
          <div><span class="property-name">yAxis3D</span>
            <div class="c">
              <select v-model="controls.config.yAxis3D" v-on:change="selectChange">
                <option v-for="(item, key) in controls.configParameters.yAxis3D.options"
                        :key="key"
                        :value="item">{{ item }}
                </option>
              </select>
            </div>
          </div>
        </li>
        <li class="cr string">
          <div><span class="property-name">zAxis3D</span>
            <div class="c">
              <select v-model="controls.config.zAxis3D" v-on:change="selectChange">
                <option v-for="(item, key) in controls.configParameters.zAxis3D.options"
                        :key="key"
                        :value="item">{{ item }}
                </option>
              </select>
            </div>
          </div>
        </li>
        <li class="cr string">
          <div><span class="property-name">symbolSize</span>
            <div class="c">
              <select v-model="controls.config.symbolSize" v-on:change="selectChange">
                <option v-for="(item, key) in controls.configParameters.symbolSize.options"
                        :key="key"
                        :value="item">{{ item }}
                </option>
              </select>
            </div>
          </div>
        </li>
        <li class="cr string">
          <div><span class="property-name">color</span>
            <div class="c">
              <select v-model="controls.config.color" v-on:change="selectChange">
                <option v-for="(item, key) in controls.configParameters.color.options"
                        :key="key"
                        :value="item">{{ item }}
                </option>
              </select>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import 'echarts-gl';
import axios from 'axios'
// import nutrients from '@/assets/json/nutrients.json'

axios.defaults.baseURL = '/api'
export default {
  props: {
    setting: {
      type: Object,
      default: () => ({
        ref: 'figure-robot',
        id: '3d-figure-console',
        category: 'ROBOT'
      })
    },
  },
  data() {
    return {
      data: {},
      rows: [],
      option: {},
      controls: {
        config: {
          xAxis3D: 'X',
          yAxis3D: 'Y',
          zAxis3D: 'Z',
          color: 'arm',
          symbolSize: 'mse'
        },
        configParameters: {
          xAxis3D: {options: []},
          yAxis3D: {options: []},
          zAxis3D: {options: []},
          color: {options: []},
          symbolSize: {options: []}
        }
      },
      indices: {
        name: 0,
        group: 1,
        id: 16
      },
      schema: [],
      fieldIndices: {},
      groupCategories: [],
      groupColors: [],
      fieldNames: {}
    }
  },
  created() {
    this.rows = this.$route.params.rows
  },
  methods: {
    getMaxOnExtent(data) {
      var colorMax = -Infinity;
      var symbolSizeMax = -Infinity;
      for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var colorVal = item[this.controls.config.color];
        var symbolSizeVal = item[this.controls.config.symbolSize];
        colorMax = Math.max(colorVal, colorMax);
        symbolSizeMax = Math.max(symbolSizeVal, symbolSizeMax);
      }
      return {
        color: colorMax,
        symbolSize: symbolSizeMax
      };
    },
    getMinOnExtent(data) {
      var colorMin = Infinity;
      var symbolSizeMin = Infinity;
      for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var colorVal = item[this.controls.config.color];
        var symbolSizeVal = item[this.controls.config.symbolSize];
        colorMin = Math.min(colorVal, colorMin);
        symbolSizeMin = Math.min(symbolSizeVal, symbolSizeMin);
      }
      return {
        color: colorMin,
        symbolSize: symbolSizeMin
      };
    },
    selectChange() {
      let chartDom = document.getElementById(this.setting.id);
      let myChart = echarts.init(chartDom, 'dark');
      let max = this.getMaxOnExtent(this.data);
      let min = this.getMinOnExtent(this.data);
      let config = this.controls.config;
      let option = {
        visualMap: [
          {
            max: max.color,
            min: min.color
          },
          {
            max: max.symbolSize,
            min: min.symbolSize
          }
        ],
        xAxis3D: {
          name: this.controls.config.xAxis3D
        },
        yAxis3D: {
          name: this.controls.config.yAxis3D
        },
        zAxis3D: {
          name: this.controls.config.zAxis3D
        },
        series: {
          dimensions: [
            this.controls.config.xAxis3D,
            this.controls.config.yAxis3D,
            this.controls.config.zAxis3D,
            this.controls.config.color,
            this.controls.config.symbolSize
          ],
          data: this.data.map(function (item, idx) {
            return [
              item[config.xAxis3D],
              item[config.yAxis3D],
              item[config.zAxis3D],
              item[config.color],
              item[config.symbolSize],
              idx
            ];
          })
        }
      }
      myChart.setOption(option);
      myChart.resize()
    },
    init3DScatter() {
      // 创建 ECharts 实例
      let chartDom = document.getElementById(this.setting.id);
      let myChart = echarts.init(chartDom, 'dark');

      this.schema = [
        {name: 'X', index: 0},
        {name: 'Y', index: 1},
        {name: 'Z', index: 2},
        {name: 'mse', index: 3},
        {name: 'arm', index: 4},
        {name: 'robot', index: 5},
        {name: 'type', index: 6},
        {name: 'hand', index: 7},
        {name: 'console', index: 8},
        {name: 'record', index: 9},
        {name: 'deltaP', index: 10},
        {name: 'axisAngle', index: 11},
        {name: 'id', index: 12}
      ]
      let fieldNames = this.schema.map(function (item) {
        return item.name;
      });
      // fieldNames = fieldNames.slice(2, fieldNames.length - 2);
      this.fieldNames = fieldNames
      let app = {}

      function getMaxOnExtent(data) {
        var colorMax = -Infinity;
        var symbolSizeMax = -Infinity;
        for (var i = 0; i < data.length; i++) {
          var item = data[i];
          var colorVal = item[config.color];
          var symbolSizeVal = item[config.symbolSize];
          colorMax = Math.max(colorVal, colorMax);
          symbolSizeMax = Math.max(symbolSizeVal, symbolSizeMax);
        }
        return {
          color: colorMax,
          symbolSize: symbolSizeMax
        };
      }

      function getMinOnExtent(data) {
        var colorMin = Infinity;
        var symbolSizeMin = Infinity;
        for (var i = 0; i < data.length; i++) {
          var item = data[i];
          var colorVal = item[config.color];
          var symbolSizeVal = item[config.symbolSize];
          colorMin = Math.min(colorVal, colorMin);
          symbolSizeMin = Math.min(symbolSizeVal, symbolSizeMin);
        }
        return {
          color: colorMin,
          symbolSize: symbolSizeMin
        };
      }

      let config = (app.config = {
        xAxis3D: 'X',
        yAxis3D: 'Y',
        zAxis3D: 'Z',
        color: 'arm',
        symbolSize: 'mse',
        onChange: function () {
          let max = getMaxOnExtent(this.data);
          if (this.data) {
            myChart.setOption({
              visualMap: [
                {
                  max: max.color / 2
                },
                {
                  max: max.symbolSize / 2
                }
              ],
              xAxis3D: {
                name: config.xAxis3D
              },
              yAxis3D: {
                name: config.yAxis3D
              },
              zAxis3D: {
                name: config.zAxis3D
              },
              series: {
                dimensions: [
                  config.xAxis3D,
                  config.yAxis3D,
                  config.yAxis3D,
                  config.color,
                  config.symbolSize
                ],
                data: this.data.map(function (item, idx) {
                  return [
                    item[config.xAxis3D],
                    item[config.yAxis3D],
                    item[config.zAxis3D],
                    item[config.color],
                    item[config.symbolSize],
                    idx
                  ];
                })
              }
            });
          }
        }
      });
      let max = getMaxOnExtent(this.data);
      let min = getMinOnExtent(this.data);

      let data_ = this.data.map(function (item, idx) {
        return [
          item[config.xAxis3D],
          item[config.yAxis3D],
          item[config.zAxis3D],
          item[config.color],
          item[config.symbolSize],
          idx
        ];
      })
      this.option = {
        tooltip: {},
        visualMap: [
          {
            top: 10,
            calculable: true,
            dimension: 3,
            max: max.color,
            min: min.color,
            inRange: {
              color: [
                '#1710c0',
                '#0b9df0',
                '#00fea8',
                '#00ff0d',
                '#f5f811',
                '#f09a09',
                '#fe0300'
              ]
            },
            textStyle: {
              color: '#fff'
            }
          },
          {
            bottom: 10,
            calculable: true,
            dimension: 4,
            max: max.symbolSize,
            min: min.symbolSize,
            inRange: {
              symbolSize: [5, 25]
            },
            textStyle: {
              color: '#fff'
            }
          }
        ],
        xAxis3D: {
          name: config.xAxis3D,
          type: 'value'
        },
        yAxis3D: {
          name: config.yAxis3D,
          type: 'value'
        },
        zAxis3D: {
          name: config.zAxis3D,
          type: 'value'
        },
        grid3D: {
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisPointer: {
            lineStyle: {
              color: '#ffbd67'
            }
          },
          viewControl: {
            // autoRotate: true,
            projection: 'orthographic'
          }
        },
        series: [
          {
            type: 'scatter3D',
            dimensions: [
              config.xAxis3D,
              config.yAxis3D,
              config.zAxis3D,
              config.color,
              config.symbolSize,
              "id"
            ],
            data: data_,
            symbolSize: 5,
            // symbol: 'triangle',
            itemStyle: {
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,0.8)'
            },
            emphasis: {
              itemStyle: {
                color: '#fff'
              }
            }
          }
        ]
      }
      app.configParameters = {};
      ['xAxis3D', 'yAxis3D', 'zAxis3D', 'color', 'symbolSize'].forEach(function (
          fieldName
      ) {
        app.configParameters[fieldName] = {
          options: fieldNames
        };
      });
      this.controls = app
      myChart.setOption(this.option);
      myChart.resize()
    }
  },
  mounted() {
    const this_ = this
    async function fetchData() {
      const id_list = [];
      this_.rows.forEach(item => {
        if(item.type === this_.setting.category) {
          id_list.push(item.id);
        }
      });
      let response = await axios.get('/calibration/dataset/plot/', {
        params: {
          ids: id_list
        }
      })
      this_.data = JSON.parse(response.data).data
      this_.init3DScatter();
    }
    fetchData()
  }
}
</script>

<style scoped lang="scss">
.dg.main {
  transition: opacity .1s linear;
}

.dg {
  color: #eee;
  font: 11px Lucida Grande, sans-serif;
  text-shadow: 0 -1px 0 #111;
}

.dg .property-name {
  cursor: default;
  float: left;
  clear: left;
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dg .cr.string {
  border-left: 3px solid #1ed36f;
}

.dg li:not(.folder) {
  cursor: auto;
  height: 27px;
  line-height: 27px;
  padding: 0 4px 0 5px;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  unicode-bidi: isolate;
}
</style>
